<style lang="stylus" scoped>

</style>

<template>
  <div class="row justify-between">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <q-card class="shadow-2">
        <q-card-section class="q-pa-sm">
          <div class="row items-center no-wrap">
            <div class="col">
              <q-chip class="no-border-radius" color="light-blue" text-color="white" size="10px" style="margin:0;">岗位</q-chip>
              <q-chip square class="no-border-radius q-ml-none q-mr-none text-weight-bold">
                {{ baseInfoForm.code }}
              </q-chip>
            </div>
            <div class="col-auto">
              <q-btn color="grey-7" round flat icon="more_vert">
                <q-menu cover auto-close>
                  <q-list>
                    <q-item clickable @click="$router.go(-1)">
                      <q-item-section>返回</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pa-sm">
          <main-field v-if="baseInfoForm.id" :form="baseInfoForm" :field="fieldConfig"></main-field>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-12 q-mt-sm">
      <q-card class="shadow-2">
        <q-card-section class="q-pa-none">
          <q-tabs
            v-model="tabSelected"
            dense
            class="bg-grey-2 text-teal"
            active-color="primary"
            indicator-color="primary"
            align="left"
            narrow-indicator
          >
            <q-tab name="tab1" label="组织" />
          </q-tabs>

          <q-tab-panels v-model="tabSelected" animated>
            <q-tab-panel name="tab1" class="q-pa-none">
              <q-splitter
                v-model="splitterOrg"
              >

                <template v-slot:before>
                  <q-tabs
                    v-model="orgSecondTabs"
                    vertical
                    inline-label
                    dense
                    class="text-teal"
                  >
                    <q-tab name="tab1" label="岗位">
                      <q-badge class="q-ml-sm" transparent align="middle" color="secondary">
                        {{ baseInfoForm.stationNum > 9 ? baseInfoForm.stationNum: '0'+baseInfoForm.stationNum }}
                      </q-badge>
                    </q-tab>
                    <q-tab name="tab2" label="用户">
                      <q-badge class="q-ml-sm" transparent align="middle" color="secondary">
                        {{ baseInfoForm.userNum > 9 ? baseInfoForm.userNum: '0'+baseInfoForm.userNum }}
                      </q-badge>
                    </q-tab>
                    <q-tab name="tab3" label="角色">
                      <q-badge class="q-ml-sm" transparent align="middle" color="secondary">
                        {{ baseInfoForm.roleNum > 9 ? baseInfoForm.roleNum: '0'+baseInfoForm.roleNum }}
                      </q-badge>
                    </q-tab>
                    <q-tab name="tab4" label="业务组">
                      <!-- <q-badge class="q-ml-sm" transparent align="middle" color="secondary">
                        {{ baseInfoForm.depNum }}
                      </q-badge> -->
                    </q-tab>
                  </q-tabs>
                </template>

                <template v-slot:after>
                  <q-tab-panels
                    v-model="orgSecondTabs"
                    animated
                  >
                    <q-tab-panel name="tab1" class="q-pa-none">
                      <q-table
                        flat
                        dense
                        class="bg-white shadow-2"
                        :data="dataPost"
                        :columns="columnsPost"
                        row-key="id"
                        separator="cell"
                        selection="multiple"
                        :selected.sync="selectedPost"
                        :visible-columns="visibleColumnsPost"
                        :filter="searchFormPost"
                        :pagination.sync="paginationPost"
                        :rows-per-page-options="[3, 5, 10, 20]"
                        no-data-label="暂无数据"
                        table-class="h-custom"
                        @request="tableDataGet"
                      >
                        <template v-slot:top-left="props">
                          <!-- <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addPost"/> -->
                          <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                        </template>
                        <template v-slot:top-right="props">
                          <q-select
                            v-model="visibleColumnsPost"
                            multiple
                            borderless
                            options-dense
                            :display-value="$t('显示列')"
                            emit-value
                            map-options
                            :options="columnsPost"
                            option-value="name"
                            class="q-mx-lg"
                          >
                            <template v-slot:option="scope">
                              <q-item
                                v-bind="scope.itemProps"
                                v-on="scope.itemEvents"
                                v-if="!scope.opt.required"
                              >
                                <q-item-section avatar>
                                  <q-toggle color="blue" v-model="visibleColumnsPost" :val="scope.opt.name" />
                                </q-item-section>
                                <q-item-section style="min-width:60px">
                                  {{ scope.opt.label }}
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                          <q-toggle
                            v-model="searchTogglePost"
                            left-label
                            label="搜索"
                            color="blue"
                            checked-icon="check"
                            unchecked-icon="clear"
                            keep-color
                          />
                          <q-btn
                            flat round dense
                            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                            @click="props.toggleFullscreen"
                            class="q-ml-md"
                          />
                        </template>
                        <template v-if="searchTogglePost" v-slot:top-row="props">
                          <q-tr :props="props">
                            <q-td>
                            </q-td>
                            <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                              <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormPost })"/>
                              <q-input dense outlined v-model="searchFormPost[col.name]" v-else/>
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th>
                              <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                            </q-th>
                            <q-th v-for="col in props.cols" :key="col.name" :props="props">
                              {{ col.label }}
                            </q-th>
                          </q-tr>
                        </template>
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td width="52">
                              <q-checkbox dense v-model="props.selected" />
                            </q-td>
                            <q-td key="action" :props="props">
                              <q-btn-dropdown
                                color="blue"
                                size="sm"
                                dense
                                menu-anchor="bottom left"
                                menu-self="top left"
                                content-class="text-grey"
                                icon="settings">
                                <q-list dense>
                                  <q-item clickable v-close-popup @click="delPostRow(props.row)">
                                    <q-item-section>
                                      <q-item-label>删除</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
                              </q-btn-dropdown>
                            </q-td>
                            <q-td key="code" :props="props">
                              <span class="text-light-blue cursor-pointer" @click="toDetails(props.row.id, 'post')">{{ props.row.code }}</span>
                            </q-td>
                            <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                            <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                          </q-tr>
                          <q-tr v-show="props.expand" :props="props">
                            <q-td colspan="100%">
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:pagination="props">
                          <q-pagination
                            v-model="paginationPost.page"
                            color="blue"
                            :max-pages="5"
                            :max="pagesPost"
                            :boundaryLinks="true"
                            :directionLinks="true"
                          />
                          共 {{ totalPost }} 条
                        </template>
                      </q-table>
                    </q-tab-panel>
                    <q-tab-panel name="tab2" class="q-pa-none">
                      <q-table
                        flat
                        dense
                        class="bg-white shadow-2"
                        :data="dataUser"
                        :columns="columnsUser"
                        row-key="id"
                        separator="cell"
                        selection="multiple"
                        :selected.sync="selectedUser"
                        :visible-columns="visibleColumnsUser"
                        :filter="searchFormUser"
                        :pagination.sync="paginationUser"
                        :rows-per-page-options="[3, 5, 10, 20]"
                        no-data-label="暂无数据"
                        table-class="h-custom"
                        @request="tableDataGet"
                      >
                        <template v-slot:top-left="props">
                          <!-- <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addUser"/> -->
                          <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                        </template>
                        <template v-slot:top-right="props">
                          <q-select
                            v-model="visibleColumnsUser"
                            multiple
                            borderless
                            options-dense
                            :display-value="$t('显示列')"
                            emit-value
                            map-options
                            :options="columnsUser"
                            option-value="name"
                            class="q-mx-lg"
                          >
                            <template v-slot:option="scope">
                              <q-item
                                v-bind="scope.itemProps"
                                v-on="scope.itemEvents"
                                v-if="!scope.opt.required"
                              >
                                <q-item-section avatar>
                                  <q-toggle color="blue" v-model="visibleColumnsUser" :val="scope.opt.name" />
                                </q-item-section>
                                <q-item-section style="min-width:60px">
                                  {{ scope.opt.label }}
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                          <q-toggle
                            v-model="searchToggleUser"
                            left-label
                            label="搜索"
                            color="blue"
                            checked-icon="check"
                            unchecked-icon="clear"
                            keep-color
                          />
                          <q-btn
                            flat round dense
                            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                            @click="props.toggleFullscreen"
                            class="q-ml-md"
                          />
                        </template>
                        <template v-if="searchToggleUser" v-slot:top-row="props">
                          <q-tr :props="props">
                            <q-td>
                            </q-td>
                            <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                              <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormUser })"/>
                              <q-input dense outlined v-model="searchFormUser[col.name]" v-else/>
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th>
                              <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                            </q-th>
                            <q-th v-for="col in props.cols" :key="col.name" :props="props">
                              {{ col.label }}
                            </q-th>
                          </q-tr>
                        </template>
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td width="52">
                              <q-checkbox dense v-model="props.selected" />
                            </q-td>
                            <q-td key="action" :props="props">
                              <q-btn-dropdown
                                color="blue"
                                size="sm"
                                dense
                                menu-anchor="bottom left"
                                menu-self="top left"
                                content-class="text-grey"
                                icon="settings">
                                <q-list dense>
                                  <q-item clickable v-close-popup @click="delUserRow(props.row)">
                                    <q-item-section>
                                      <q-item-label>删除</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
                              </q-btn-dropdown>
                            </q-td>
                            <q-td key="loginName" :props="props">{{ props.row.loginName }}</q-td>
                            <q-td key="email" :props="props">{{ props.row.email }}</q-td>
                            <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                          </q-tr>
                          <q-tr v-show="props.expand" :props="props">
                            <q-td colspan="100%">
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:pagination="props">
                          <q-pagination
                            v-model="paginationUser.page"
                            color="blue"
                            :max-pages="5"
                            :max="pagesUser"
                            :boundaryLinks="true"
                            :directionLinks="true"
                          />
                          共 {{ totalUser }} 条
                        </template>
                      </q-table>
                    </q-tab-panel>
                    <q-tab-panel name="tab3" class="q-pa-none">
                      <q-table
                        flat
                        dense
                        class="bg-white shadow-2"
                        :data="dataRole"
                        :columns="columnsRole"
                        row-key="id"
                        separator="cell"
                        selection="multiple"
                        :selected.sync="selectedRole"
                        :visible-columns="visibleColumnsRole"
                        :filter="searchFormRole"
                        :pagination.sync="paginationRole"
                        :rows-per-page-options="[3, 5, 10, 20]"
                        no-data-label="暂无数据"
                        table-class="h-custom"
                        @request="tableDataGet"
                      >
                        <template v-slot:top-left="props">
                          <!-- <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addRole"/> -->
                          <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                        </template>
                        <template v-slot:top-right="props">
                          <q-select
                            v-model="visibleColumnsRole"
                            multiple
                            borderless
                            options-dense
                            :display-value="$t('显示列')"
                            emit-value
                            map-options
                            :options="columnsRole"
                            option-value="name"
                            class="q-mx-lg"
                          >
                            <template v-slot:option="scope">
                              <q-item
                                v-bind="scope.itemProps"
                                v-on="scope.itemEvents"
                                v-if="!scope.opt.required"
                              >
                                <q-item-section avatar>
                                  <q-toggle color="blue" v-model="visibleColumnsRole" :val="scope.opt.name" />
                                </q-item-section>
                                <q-item-section style="min-width:60px">
                                  {{ scope.opt.label }}
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                          <q-toggle
                            v-model="searchToggleRole"
                            left-label
                            label="搜索"
                            color="blue"
                            checked-icon="check"
                            unchecked-icon="clear"
                            keep-color
                          />
                          <q-btn
                            flat round dense
                            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                            @click="props.toggleFullscreen"
                            class="q-ml-md"
                          />
                        </template>
                        <template v-if="searchToggleRole" v-slot:top-row="props">
                          <q-tr :props="props">
                            <q-td>
                            </q-td>
                            <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                              <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormRole })"/>
                              <q-input dense outlined v-model="searchFormRole[col.name]" v-else/>
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th>
                              <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                            </q-th>
                            <q-th v-for="col in props.cols" :key="col.name" :props="props">
                              {{ col.label }}
                            </q-th>
                          </q-tr>
                        </template>
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td width="52">
                              <q-checkbox dense v-model="props.selected" />
                            </q-td>
                            <q-td key="action" :props="props">
                              <q-btn-dropdown
                                color="blue"
                                size="sm"
                                dense
                                menu-anchor="bottom left"
                                menu-self="top left"
                                content-class="text-grey"
                                icon="settings">
                                <q-list dense>
                                  <q-item clickable v-close-popup @click="delRoleRow(props.row)">
                                    <q-item-section>
                                      <q-item-label>删除</q-item-label>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
                              </q-btn-dropdown>
                            </q-td>
                            <q-td key="roleCode" :props="props">
                              <span class="text-light-blue cursor-pointer" @click="toDetails(props.row.id, 'post')">{{ props.row.roleCode }}</span>
                            </q-td>
                            <q-td key="roleName" :props="props">{{ props.row.roleName }}</q-td>
                            <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                          </q-tr>
                          <q-tr v-show="props.expand" :props="props">
                            <q-td colspan="100%">
                            </q-td>
                          </q-tr>
                        </template>
                        <template v-slot:pagination="props">
                          <q-pagination
                            v-model="paginationRole.page"
                            color="blue"
                            :max-pages="5"
                            :max="pagesRole"
                            :boundaryLinks="true"
                            :directionLinks="true"
                          />
                          共 {{ totalRole }} 条
                        </template>
                      </q-table>
                    </q-tab-panel>
                    <q-tab-panel name="tab4" class="q-pa-none">
                      <q-splitter
                        v-model="splitterBusOrg"
                      >

                        <template v-slot:before>
                          <q-tabs
                            v-model="busOrgTabs"
                            vertical
                            dense
                            class="text-teal"
                          >
                            <q-tab v-for="tab in tabsList" :key="tab.id" :name="tab.code" :label="tab.name" />
                          </q-tabs>
                        </template>

                        <template v-slot:after>
                          <q-table
                            flat
                            dense
                            class="bg-white"
                            :data="dataGroup"
                            :columns="columnsGroup"
                            row-key="id"
                            separator="cell"
                            selection="multiple"
                            :selected.sync="selectedGroup"
                            :visible-columns="visibleColumnsGroup"
                            :filter="searchFormGroup"
                            :pagination.sync="paginationGroup"
                            :rows-per-page-options="[3, 5, 10, 20]"
                            no-data-label="暂无数据"
                            table-class="h-custom"
                            @request="tableDataGetGroup"
                          >
                            <template v-slot:top-left="props">
                              <!-- <q-btn size="sm" color="light-blue" :label="$t('分配')" @click="addGroup"/> -->
                              <!-- <q-btn color="negative" flat :label="$t('批量删除')" class="q-ml-sm"/> -->
                            </template>
                            <template v-slot:top-right="props">
                              <q-select
                                v-model="visibleColumnsGroup"
                                multiple
                                borderless
                                options-dense
                                :display-value="$t('显示列')"
                                emit-value
                                map-options
                                :options="columnsGroup"
                                option-value="name"
                                class="q-mx-lg"
                              >
                                <template v-slot:option="scope">
                                  <q-item
                                    v-bind="scope.itemProps"
                                    v-on="scope.itemEvents"
                                    v-if="!scope.opt.required"
                                  >
                                    <q-item-section avatar>
                                      <q-toggle color="blue" v-model="visibleColumnsGroup" :val="scope.opt.name" />
                                    </q-item-section>
                                    <q-item-section style="min-width:60px">
                                      {{ scope.opt.label }}
                                    </q-item-section>
                                  </q-item>
                                </template>
                              </q-select>
                              <q-toggle
                                v-model="searchToggleGroup"
                                left-label
                                label="搜索"
                                color="blue"
                                checked-icon="check"
                                unchecked-icon="clear"
                                keep-color
                              />
                              <q-btn
                                flat round dense
                                :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                                @click="props.toggleFullscreen"
                                class="q-ml-md"
                              />
                            </template>
                            <template v-if="searchToggleGroup" v-slot:top-row="props">
                              <q-tr :props="props">
                                <q-td>
                                </q-td>
                                <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                                  <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchFormGroup })"/>
                                  <q-input dense outlined v-model="searchFormGroup[col.name]" v-else/>
                                </q-td>
                              </q-tr>
                            </template>
                            <template v-slot:header="props">
                              <q-tr :props="props">
                                <q-th>
                                  <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                                </q-th>
                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                                  {{ col.label }}
                                </q-th>
                              </q-tr>
                            </template>
                            <template v-slot:body="props">
                              <q-tr :props="props">
                                <q-td width="52">
                                  <q-checkbox dense v-model="props.selected" />
                                </q-td>
                                <q-td key="action" :props="props">
                                  <q-btn-dropdown
                                    color="blue"
                                    size="sm"
                                    dense
                                    menu-anchor="bottom left"
                                    menu-self="top left"
                                    content-class="text-grey"
                                    icon="settings">
                                    <q-list dense>
                                      <!-- <q-item clickable v-close-popup @click="delGroupRowGroup(props.row)">
                                        <q-item-section>
                                          <q-item-label>删除</q-item-label>
                                        </q-item-section>
                                      </q-item> -->
                                    </q-list>
                                  </q-btn-dropdown>
                                </q-td>
                                <q-td key="groupCode" :props="props">
                                  {{ props.row.groupCode }}
                                </q-td>
                                <q-td key="groupName" :props="props">{{ props.row.groupName }}</q-td>
                                <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                              </q-tr>
                              <q-tr v-show="props.expand" :props="props">
                                <q-td colspan="100%">
                                </q-td>
                              </q-tr>
                            </template>
                            <template v-slot:pagination="props">
                              <q-pagination
                                v-model="paginationGroup.page"
                                color="blue"
                                :max-pages="5"
                                :max="pagesGroup"
                                :boundaryLinks="true"
                                :directionLinks="true"
                              />
                              共 {{ totalGroup }} 条
                            </template>
                          </q-table>
                        </template>

                      </q-splitter>
                    </q-tab-panel>
                  </q-tab-panels>
                </template>

              </q-splitter>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script>
import MainField from 'src/pages/Common/SecondPackage/MainField/MainField'
export default {
  name: 'PostDetails',
  // props: {
  //   id: {
  //     type: String,
  //     required: true
  //   }
  // },
  components: {
    MainField
  },
  data () {
    return {
      baseInfoForm: {
        name: String,
        code: String,
        createUserName: String,
        createTime: String,
        lastUpdateTime: String,
        parentName: '',
        parentCode: ''
      },
      fieldConfig: [
        {
          name: 'name',
          label: '岗位名称'
        },
        {
          name: 'code',
          label: '岗位编码'
        },
        {
          name: 'parentName',
          label: '上级名称'
        },
        {
          name: 'parentCode',
          label: '上级编码'
        },
        {
          name: 'createUserName',
          label: '创建人'
        },
        {
          name: 'createTime',
          label: '创建时间'
        },
        {
          name: 'remark',
          label: '说明',
          type: 'textarea'
        }
      ],
      tabSelected: '',
      orgSecondTabs: '',
      splitterOrg: 10,
      splitterBusOrg: 10,
      tableHeader: '',
      // 岗位
      visibleColumnsPost: [
        'action',
        'name',
        'code',
        'createTime'
      ],
      columnsPost: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'code', required: true, label: '岗位编码', align: 'left', field: 'code', sortable: true },
        { name: 'name', required: true, label: '岗位名称', align: 'left', field: 'name', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataPost: [],
      totalPost: 0,
      paginationPost: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchTogglePost: false,
      searchFormPost: {
        name: '',
        code: '',
        createTime: ''
      },
      selectedPost: [],
      // 用户
      visibleColumnsUser: [
        'action',
        'loginName',
        'email',
        'createTime'
      ],
      columnsUser: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'loginName', required: true, label: '账户', align: 'left', field: 'loginName', sortable: true },
        { name: 'email', required: true, label: '邮箱地址', align: 'left', field: 'loginName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataUser: [],
      totalUser: 0,
      paginationUser: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleUser: false,
      searchFormUser: {
        loginName: '',
        email: '',
        createTime: ''
      },
      selectedUser: [],
      // 角色
      visibleColumnsRole: [
        'action',
        'roleName',
        'roleCode',
        'createTime'
      ],
      columnsRole: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'roleCode', required: true, label: '角色编码', align: 'left', field: 'roleCode', sortable: true },
        { name: 'roleName', required: true, label: '角色名称', align: 'left', field: 'roleName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataRole: [],
      totalRole: 0,
      paginationRole: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleRole: false,
      searchFormRole: {
        roleName: '',
        roleCode: '',
        createTime: ''
      },
      selectedRole: [],
      // 业务组
      busOrgTabs: '',
      tabsList: [],
      visibleColumnsGroup: [
        'action',
        'groupName',
        'groupCode',
        'createTime'
      ],
      columnsGroup: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'groupCode', required: true, label: '编码', align: 'left', field: 'groupCode', sortable: true },
        { name: 'groupName', required: true, label: '名称', align: 'left', field: 'groupName', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataGroup: [],
      totalGroup: 0,
      paginationGroup: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchToggleGroup: false,
      searchFormGroup: {
        groupName: '',
        groupCode: '',
        createTime: ''
      },
      selectedGroup: []
    }
  },
  computed: {
    pagesGroup () {
      return Math.ceil(this.totalGroup / this.paginationGroup.rowsPerPage)
    },
    pagesPost () {
      return Math.ceil(this.totalPost / this.paginationPost.rowsPerPage)
    },
    pagesUser () {
      return Math.ceil(this.totalUser / this.paginationUser.rowsPerPage)
    },
    pagesRole () {
      return Math.ceil(this.totalRole / this.paginationRole.rowsPerPage)
    }
  },
  watch: {
    'paginationGroup.page' () {
      this.tableDataGet({
        pagination: this.paginationGroup,
        filter: this.searchFormGroup
      })
    },
    'paginationPost.page' () {
      this.tableDataGet({
        pagination: this.paginationPost,
        filter: this.searchFormPost
      })
    },
    'paginationUser.page' () {
      this.tableDataGet({
        pagination: this.paginationUser,
        filter: this.searchFormUser
      })
    },
    'paginationRole.page' () {
      this.tableDataGet({
        pagination: this.paginationRole,
        filter: this.searchFormRole
      })
    },
    $route (route) {
      if (route.name === 'PostDetails') {
        this.init()
      }
    },
    tabSelected (tabSelected) {
      switch (tabSelected) {
        case 'tab1':
          this.orgSecondTabs = 'tab1'
          break
      }
    },
    orgSecondTabs (orgSecondTabs) {
      switch (orgSecondTabs) {
        case 'tab1':
          this.tableHeader = 'Post'
          this.tableDataGet({
            pagination: this.paginationPost,
            filter: this.searchFormPost
          })
          break
        case 'tab2':
          this.tableHeader = 'User'
          this.tableDataGet({
            pagination: this.paginationUser,
            filter: this.searchFormUser
          })
          break
        case 'tab3':
          this.tableHeader = 'Role'
          this.tableDataGet({
            pagination: this.paginationRole,
            filter: this.searchFormRole
          })
          break
        case 'tab4':
          this.groupTypeGet()
          break
      }
    },
    busOrgTabs (busOrgTabs) {
      this.tableDataGetGroup({
        pagination: this.paginationGroup,
        filter: this.searchFormGroup
      })
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.tabSelected = 'tab1'
      await this.baseInfoGet()
      this.tableHeader = 'Post'
      await this.tableDataGet({
        pagination: this.paginationPost,
        filter: this.searchFormPost
      })
    },
    baseInfoGet () {
      this.$api({
        method: 'get',
        url: `/mdm/org/findById/${this.$route.params.id}`,
        successCallback: ({ data }) => {
          this.baseInfoForm = { ...data }
          this.baseInfoForm.parentCode = data.parent.code
          this.baseInfoForm.parentName = data.parent.name
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    groupTypeGet () {
      this.$api({
        method: 'post',
        url: '/mdm/businessGroupType/queryNoPage',
        params: {
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.tabsList = data
          this.busOrgTabs = this.tabsList[0].code
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async tableDataGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      let otherQueryArgs = {}, url = ''
      switch (this.tableHeader) {
        case 'Post':
          otherQueryArgs = { parentId: this.$route.params.id }
          url = '/mdm/org/queryStation'
          break
        case 'User':
          otherQueryArgs = { stationId: this.$route.params.id }
          url = '/mdm/userpermission/queryUser'
          break
        case 'Role':
          otherQueryArgs = { stationId: this.$route.params.id }
          url = '/mdm/rolestation/query'
          break
        case 'Group':
          otherQueryArgs = { stationId: this.$route.params.id, typeCode: this.busOrgTabs }
          url = '/mdm/groupstation/query'
          break
      }
      await this.$api({
        method: 'post',
        url: url,
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter,
          ...otherQueryArgs
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this[`total${this.tableHeader}`] = data.total
          this[`data${this.tableHeader}`] = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this[`pagination${this.tableHeader}`].page = page
      this[`pagination${this.tableHeader}`].rowsPerPage = rowsPerPage
      this[`pagination${this.tableHeader}`].sortBy = sortBy
      this[`pagination${this.tableHeader}`].descending = descending
    },
    async tableDataGetGroup (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/groupstation/query',
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter,
          stationId: this.$route.params.id,
          typeCode: this.busOrgTabs
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.totalGroup = data.total
          this.dataGroup = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.paginationGroup.page = page
      this.paginationGroup.rowsPerPage = rowsPerPage
      this.paginationGroup.sortBy = sortBy
      this.paginationGroup.descending = descending
    },
    toDetails (id, type) {
      if (type === 'post') {
        this.$router.push({ name: 'PostDetails', params: { id } })
      }
    }
  }
}
</script>
